<template>
	<view class="flex-col page">
		<view class="flex-col group">

			<text class="text_1">{{accountbookTypeName}}</text>
			<view class="flex-row u-m-t-30">
				<uni-table ref="table" style="font-size: 24rpx;" border stripe emptyText="暂无更多数据">
					<uni-tr height="50">
						<uni-th align="center"><text class="u-font-10">序号</text></uni-th>
						<uni-th align="center"><text class="u-font-10">合同姓名</text></uni-th>
						<uni-th align="center"><text class="u-font-10">原合同额</text></uni-th>
						<uni-th align="center"><text class="u-font-10">已支付</text></uni-th>
						<uni-th align="center"><text class="u-font-10">未支付</text></uni-th>
						<uni-th align="center"><text class="u-font-10">结算合同额</text></uni-th>
						<uni-th align="center"><text class="u-font-10">变更额</text></uni-th>
					</uni-tr>
					<uni-tr align="center" height="50" v-for="(item, index) in info" :key="index">
						<uni-td align="center" v-if="index<info.length-1">
							<view class="u-font-10">{{ index+1}}</view>
						</uni-td>
						<uni-td align="center" v-else colspan="2">
							<view class="u-font-10">{{ item.name }}</view>
						</uni-td>
						<uni-td align="center" v-if="index<info.length-1">
							<view class="u-font-10">{{ item.name }}</view>
						</uni-td>
						<uni-td align="center"><text class="u-font-10">{{ item.originalContract }}</text></uni-td>
						<uni-td align="center"><text class="u-font-10">{{ item.paid }}</text></uni-td>
						<uni-td align="center"><text class="u-font-10">{{ item.unPaid }}</text></uni-td>
						<uni-td align="center"><text class="u-font-10">{{ item.settlementContract }}</text></uni-td>
						<uni-td align="center">
							{{item.changeAmount}}
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				info: {},
				accountbookTypeName: '',
				tableData: [],
			};
		},
		onLoad(option) {
			if (option.id) {
				this.detailed(option.id);
			}
			if (option.all) {
				this.sumDetailed()
			}
		},
		methods: {
			detailed(id) {
				this.$http('lbook.detailed', {
					accountbookTypeId: id
				}).then(r => {
					if (r.code == 200) {
						this.info = r.data.accountbookDtoList;
						this.accountbookTypeName = r.data.accountbookTypeName
					}
				});
			},
			sumDetailed() {
				this.$http('lbook.sumDetailed').then(r => {
					if (r.code == 200) {
						this.accountbookTypeName = "合同总计";
						this.info = r.data;
						console.log(this.info);
					}
				});
			}
		},
	};
</script>

<style scoped lang="scss">
	::v-deep .uni-table-td {
		padding: 0;
		font-size: 20rpx;
	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	.section_2 {
		background-color: #d9d9d9;
		width: 1rpx;
		height: 548rpx;
	}

	.group_6 {
		margin-top: 19rpx;
		width: 86rpx;
	}

	.text_16 {
		color: #666666;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_18 {
		margin-top: 73rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_20 {
		margin-top: 91rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_22 {
		margin-top: 91rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_24 {
		margin-top: 91rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.page {
		background-color: #ffffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding: 29rpx 32rpx 549rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.text_1 {
		align-self: flex-start;
		color: #191919;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.section_1 {
		margin-top: 42rpx;
		padding-left: 10rpx;
		padding-right: 9rpx;
		background-image: url('https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868787357218855.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.view {
		margin-left: 16rpx;
	}

	.group_5 {
		margin-top: 19rpx;
		width: 108rpx;
	}

	.group_7 {
		margin-top: 19rpx;
		width: 130rpx;
	}

	.group_8 {
		margin-left: 11rpx;
		margin-top: 19rpx;
	}

	.text_10 {
		margin-top: 46rpx;
		align-self: center;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_11 {
		color: #666666;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_12 {
		margin-top: 73rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_13 {
		margin-top: 91rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_14 {
		margin-top: 91rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_15 {
		margin-top: 91rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_31 {
		color: #666666;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_32 {
		margin-top: 73rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_33 {
		margin-top: 91rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_34 {
		margin-top: 91rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_35 {
		margin-top: 91rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_36 {
		color: #666666;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_37 {
		margin-top: 73rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_38 {
		margin-top: 91rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_39 {
		margin-top: 91rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_40 {
		margin-top: 91rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.group_3 {
		margin-top: 19rpx;
	}

	.group_4 {
		margin-left: 9rpx;
		padding: 19rpx 0 51rpx;
		width: 105rpx;
		border-left: solid 1rpx #d9d9d9;
	}

	.text_2 {
		color: #666666;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_3 {
		margin-top: 73rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_4 {
		margin-top: 91rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_5 {
		margin-top: 91rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_6 {
		color: #666666;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_7 {
		margin-top: 67rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_8 {
		margin-top: 91rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_9 {
		margin-top: 91rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}
</style>
